<template>
	<view>
		<template v-if="loadFlag">
			<view class="loadingTxt">
				<loading></loading>
			</view>
		</template>
		<template v-else>
			<view class="quesList" v-for="(item,index) in dataList" :key="index">
				<view class="quesTit">
					<view class="queType">{{item.questionType}}</view>
					<view class="queTitCon spec">
						<rich-text :nodes="formatImgRichText(item.subjectName)"></rich-text>
					</view>
				</view>
				<view class="quesOptions">
					<view class="optionsItem">
						<view class="optionsNum">A</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.a)">{{item.a}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.a)"/>
							</template>
						</view>
					</view>
					<view class="optionsItem">
						<view class="optionsNum">B</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.b)">{{item.b}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.b)"/>
							</template>
						</view>
					</view>
					<view class="optionsItem" v-if="item.c !== ''">
						<view class="optionsNum">C</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.c)">{{item.c}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.c)"/>
							</template>
						</view>
					</view>
					<view class="optionsItem" v-if="item.d !== ''">
						<view class="optionsNum">D</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.d)">{{item.d}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.d)"/>
							</template>
						</view>
					</view>
					<view class="optionsItem" v-if="item.e !== ''">
						<view class="optionsNum">E</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.e)">{{item.e}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.e)"/>
							</template>
						</view>
					</view>
					<view class="optionsItem" v-if="item.e !== ''">
						<view class="optionsNum">F</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(item.f)">{{item.f}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(item.f)"/>
							</template>
						</view>
					</view>
				</view>
				<view class="ansBox">
					<view class="myAns">
						<text>我的答案:</text>
						<text :class="[item.result === 1 ? 'rightTxt' : 'errTxt']">{{item.myAnswer}}</text>
					</view>
					<view v-if="item.comTag === 2">正确答案:<text class="rightTxt">{{item.myAnswer}}</text></view>
				</view>
				<view class="analysis" v-if="item.resolution !== ''">
					<view class="analysisTit">解析:</view>
					<view class="analysisCon">
						<rich-text :nodes="item.resolution"></rich-text>
					</view>
				</view>
			</view>
			<view class="btnWrap hasFlex">
				<button class="comBtn reset" @tap="goStudy">去学习</button>
				<button class="comBtn" @tap="goQuestion" v-if="comTag === 1">去订正</button>
			</view>
		</template>
		
	</view>
</template>

<script>
	import { getMyErrBookDet } from '@/api/zhuxue.js'
	export default {
		data(){
			return{
				loreErrId:0,
				comTag:-1,
				loadFlag:true,
				dataList:[],
				isRefreshFlag:false
			}
		},
		computed:{
			getUrl(url){
				return function(url){
					return this.zhuXueServer + '/' + url
				}
			},
			//设置img宽度
			formatImgRichText(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("<img", "g"),regModule = new RegExp("Module/", "g");
						if(content.indexOf('Module/') != -1){
							content = content.replace(regModule, this.zhuXueServer + '/Module/');
							return content.replace(reg, '<img style="max-width:100%;height:auto;display:block"')
						}else{
							return content
						}
					}
				}
			},
			checkIsImg(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("Module/", "g");
						if(content.indexOf('Module/') != -1){
							return true;
						}else{
							return false;
						}
					}
				}
			}
		},
		onUnload(){
			if(this.isRefreshFlag){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 1];
				prevPage.$vm.isRefreshFlag = true;
			}
		},
		onShow(){
			if(this.isRefreshFlag){
				this.dataList = [];
				this.loadMyErrBookDet();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onLoad(options){
			this.loreErrId = options.loreErrId;
			this.loadMyErrBookDet();
		}, 
		methods:{
			loadMyErrBookDet(){
				let field = { loreErrorId:this.loreErrId };
				this.loadFlag = true;
				getMyErrBookDet(field).then(res=>{
					this.loadFlag = false;
					let tmpRes = res.data.datas;
					this.comTag = tmpRes.comTag;
					this.dataList.push(tmpRes);
				}).catch(err=>{})
			},
			goStudy(){
				uni.navigateTo({
					url:'/pages/subIndex/errBook/fourStep?loreId=' + this.dataList[0].loreId
				})
			},
			goQuestion(){
				uni.navigateTo({
					url:'/pages/subIndex/errBook/errQue?loreErrId=' + this.loreErrId
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/static/scss/zhuxueQue.scss';
	.ansBox{
		@include respTo(phone){
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size30;
		}
		@include respTo(pad){
			height: 50rpx;
			line-height: 50rpx;
			font-size: $padSize16;
		}
		display: flex;
		margin-top: 10rpx;
		color:$pss-text-color3;
		.myAns{
			margin-right: 30rpx;
		}
		.rightTxt,
		.errTxt{
			font-weight: bold;
			margin-left: 5rpx;
			@include respTo(phone){
				font-size: $font-size34;
			}
			@include respTo(pad){
				font-size: $padSize18;
			}
		}
		.rightTxt{
			color: $pss-color-green;
		}
		.errTxt{
			color: $pss-color-red;
		}
	}
	.analysis{
		padding: 20rpx ;
		border-top: 1px solid #eee;
		color: $pss-text-color3;
		@include respTo(phone){
			font-size: $font-size32;
		}
		@include respTo(pad){
			font-size: $padSize18;
		}
		.analysisTit{
			color: $pss-color-primary_1;
			font-weight: 600;
			@include respTo(phone){
				margin-bottom: 15rpx;
			}
			@include respTo(pad){
				margin-bottom: 8rpx;
			}
		}
	}
	.btnWrap{
		margin: 50rpx 20rpx 0;
		display: flex;
	}
	.comBtn{
		flex: 1;
		border-radius: 50rpx;
		@include respTo(phone){
			height: 76rpx;
			line-height: 76rpx;
			font-size: $font-size32; 
		}
		@include respTo(pad){
			height: 60rpx;
			line-height: 60rpx;
			font-size: $padSize20; 
		}
		&.reset{
			background: lighten($pss-color-primary_1, $amount: 40);
			color: $pss-color-primary_1;
			margin-right: 20rpx;
		}
	}
</style>